<template>
  <BasicModal
    v-bind="$attrs"
    wrapClassName="hide-modal-header is-absolute"
    :maskStyle="{ position: 'absolute' }"
    @register="roleRegister"
    :width="424"
    :minHeight="100"
    centered
    :getContainer="getDelContainer"
    @ok="confirmSubmit"
    @cancel="resetModal"
  >
    <div class="del-role">
      <div class="role-header">
        <exclamation-circle-filled :style="{ fontSize: '22px', color: '#D7802E' }" />
        <div class="header-title">删除角色提示</div>
      </div>
      <div class="role-info">确定要删除【{{ roleData.roleName }}】角色吗？</div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup name="roleDel">
import { ref, reactive } from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { message } from 'ant-design-vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import api from '@/api'

const { roleDelete } = api

const emit = defineEmits(['operateSuccess', 'register'])

const roleData = reactive({
  roleId: '',
  roleName: ''
})

const [roleRegister, { setModalProps, changeOkLoading, closeModal }] = useModalInner((data) => {
  roleData.roleId = data.roleId
  roleData.roleName = data.roleName
})

const getDelContainer = () => {
  return document.querySelector('.page-wrapper')
}
const resetModal = () => {
  changeOkLoading(false)
}
// 删除确认
const confirmSubmit = async () => {
  try {
    changeOkLoading(true)
    await roleDelete({
      roleId: roleData.roleId
    })
    closeModal()
    resetModal()
    message.success('角色删除成功')
    emit('operateSuccess')
  } catch (error) {
    changeOkLoading(false)
  }
}
</script>
<style lang="less" scoped>
.del-role {
  padding: 20px 10px;
  .role-header {
    display: flex;
    align-items: center;
    .header-title {
      line-height: 22px;
      font-weight: 600;
      font-size: 16px;
      margin-left: 16px;
    }
  }
  .role-info {
    margin-left: 36px;
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>
